<!--
 * @Author: your name
 * @Date: 2021-07-30 09:12:24
 * @LastEditTime: 2021-07-30 09:57:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \单词\响应式数据.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- 在vue3.0 ES6中 -->
    <!-- 1.响应式数据，在数据变化的时候去驱动视图的更新 -->
    <!-- 2.需要去监听数据的变化，数据劫持，数据代理，去做额外的事情 -->
    <script>
        const obj = {
            name: 'rousi',
            age: 18
        }
        // 我们需要一个特殊数据对象，能够在数据变化的时候去做别的事情
        // ESS的原理
        const vm = {}
        
        const vm = new Proxy(obj,{
            get (target,prop){
                // target 当前代理的数据源，就是obj
                // prop 获取数据时候的属性
                return target[prop]
            },
            set (target,prop,value){
                // target 当前代理的数据源，就是obj
                // prop 设置数据时候的属性
                // value 设置的值
                target[prop] = value
                render()
            }
        })


        const ren =  () =>{
            const template =`
                <p>姓名:${ojb.name}</p>
                <p>年龄:${ojb.age}</p>
            `
            document.querySelector('#app').innerHTML = template
        }
        render()
    </script>
</body>
</html>